<template>
  <div class="inner main-content">
    <PageTitle title="拣货汇总单详情" />
    <div class="ibody" v-if="summaryData">
      <div class="goods">
        <el-table
          :data="summaryData.storageLocations"
          style="width: 100%"
          row-class-name="table-normal-row"
          header-row-class-name="table-header-row"
        >
          <el-table-column prop="binNumber" label="货位号" width="100" />
          <el-table-column label="药品" width="120">
            <template #default="scope">
              <div class="goods-detail-row">
                <el-image :src="scope.row.outerPackagePicUrl" fit="contain" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="通用名（商品名）" class-name="w20">
            <template #default="scope">
              {{
                (scope.row.commonName || "") +
                (scope.row.productName ? `(${scope.row.productName})` : "")
              }}
            </template>
          </el-table-column>
          <el-table-column label="规格" prop="standard" class-name="w20" />
          <el-table-column prop="amount" label="数量" />
          <el-table-column prop="batchNumber" label="批号" />
        </el-table>
      </div>

      <div class="sum-header mt20">
        <el-row :gutter="10">
          <el-col :span="4">
            <span class="label">单号 </span>
          </el-col>
          <el-col :span="8">
            <span class="value">{{ summaryData.orderfillSortingNo }}</span>
          </el-col>
          <el-col :span="4">
            <span class="label">创建时间</span>
          </el-col>
          <el-col :span="8">
            <span class="value">{{ summaryData.createTime }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">
            <span class="label">拣货员 </span>
          </el-col>
          <el-col :span="8">
            <span class="value">{{ summaryData.picker }}</span>
          </el-col>
          <el-col :span="4">
            <span class="label">拣货时间</span>
          </el-col>
          <el-col :span="8">
            <span class="value">{{ summaryData.pickingTime }}</span>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="10">
              <el-col :span="4">
                <span class="label"> 电子拣货单： </span>
              </el-col>
              <el-col :span="8">
                <span class="value">{{
                  summaryData.isElectronic ? "是" : "否"
                }}</span>
              </el-col>
            </el-row> -->
        <el-row :gutter="10">
          <el-col :span="4">
            <span class="label"> 包裹单号: </span>
          </el-col>
          <el-col :span="20">
            <el-row class="sub-row" :gutter="20">
              <el-col
                :span="6"
                :xs="12"
                :sm="12"
                :md="8"
                :lg="6"
                v-for="(item, index) in summaryData.orderfills"
                :key="index"
                >{{ item.orderfillNo }}</el-col
              >
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="btn-group mt20">
        <div class="sum-btn" @click="printSortingOrder">
          <el-image :src="printPng" />
          <span class="sum-txt">打印拣货汇总单</span>
        </div>
        <div class="sum-btn" @click="printPackageOrder">
          <el-image :src="printPng" />
          <span class="sum-txt">打印包裹单</span>
        </div>
        <div class="sum-btn" @click="printCheckOrder">
          <el-image :src="printPng" />
          <span class="sum-txt">打印面单</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import PageTitle from "@/components/PageTitle.vue";
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import {
  getSortingSummaryDetailApi,
  printSortingOrderApi,
  printPackgeApi
} from "@/api/sorting";
import { printCheckOrderApi } from "@/api/check";
import { useUserStoreHook } from "@/store/modules/user";
import printPng from "@/assets/img/print.png";
const userStore = useUserStoreHook();

const router = useRouter();
const route = useRoute();
const sortingId = route.query.sortingId as string;
if (!sortingId) {
  router.back();
}
const summaryData = ref();
async function getSummaryDetail() {
  summaryData.value = await getSortingSummaryDetailApi(sortingId);
}

async function printCheckOrder() {
  const orderfillIds = summaryData.value.orderfills.map(item => {
    return item.orderfillId;
  });
  await printCheckOrderApi(orderfillIds);
  ElMessage({
    type: "success",
    message: "打印成功"
  });
}
async function printPackageOrder() {
  // 打印包裹单
  const orderfillNoList = summaryData.value.orderfills.map(item => {
    return item.orderfillId;
  });
  await printPackgeApi(orderfillNoList);
  ElMessage({
    type: "success",
    message: "打印成功"
  });
}
async function printSortingOrder() {
  await printSortingOrderApi(sortingId);
  ElMessage({
    type: "success",
    message: "打印成功"
  });
}
onMounted(() => {
  getSummaryDetail();
});
</script>
<style lang="scss" scoped>
.inner {
  padding-bottom: 70px;
}
.ibody {
  box-sizing: border-box;

  .goods {
    padding: 30px;
    border-radius: 10px;
    background-color: white;
    .goods-detail-row {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      background-color: #d8d8d8;
      .el-image {
        width: 80px;
        height: 80px;
      }
    }

    :deep(.w20) {
      width: 20% !important;
    }
  }
}
.sum-header {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  .label {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    color: #b5b5c3;
    margin-right: 20px;
  }
  > .el-row {
    margin-bottom: 20px;
    border-bottom: 1px dashed #d8d8d8 !important;
    height: 50px;
    line-height: 50px;
    &:last-child {
      border-bottom: none !important;
    }
  }
  .sub-row {
    word-break: break-all;
  }
}
.btn-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .sum-btn {
    margin-right: 20px;
  }
}
.sum-btn {
  width: 200px;
  height: 50px;
  opacity: 1;
  border: 1px solid #50cd89;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #50cd89;
  cursor: pointer;
  .el-image {
    width: 34px;
    height: 34px;
    object-fit: contain;
    margin-right: 5px;
  }
  .sum-txt {
  }
}
</style>
